<!--
@name:optionalList
@author:Zhenglei
@date:13:49
@description:optionalList
@update:2022/4/2713:49
-->
<template>
  <div class="pd-20">
      <el-button type="primary"
                 @click="handleOption('add')">新 增
      </el-button>
      <element-table class="mt-20"
                     :columns="columns"
                     :data="tableData"
                     v-loading="loading"
                     pager
                     :pageTotal="pageTotal"
                     :pageIndex="pageIndex"
                     :pageSize="pageSize"
                     @handleChangePage="handleChangePage">
        <template v-slot:hospitalList="{row}">
          <div>
            <el-tag style="margin-right: 5px" v-for="(item,index) in row.serviceHospitalDtoList" :key="index">
              {{ item.hospitalDto.name }}
            </el-tag>
          </div>
        </template>
        <template v-slot:position="{row}">
          <div>
            <el-tag style="margin-right: 5px" v-for="(item,index) in row.position" :key="index">
              {{ item==1?'个人类自选自配':'家庭类自选自配'}}
            </el-tag>
          </div>
        </template>
        <template v-slot:option="{row}">
          <el-button type="primary"
                     @click="handleOption('edit', row)">编辑
          </el-button>
          <el-button type="danger"
                     @click="handleOption('del', row)">删除
          </el-button>
        </template>
      </element-table>


    <optional-dialog :optionalConfiglData="optionalConfiglData"
                     v-if="showConfigDialog"
                     :visible.sync="showConfigDialog"/>
  </div>

</template>

<script>
import optionalConfigUpdateDialog from "../companyMgt/optionalConfigUpdateDialog";
import ElementTable from "../../../base/ElementTable";

export default {
  name: "optionalList",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      optionalConfiglData: {},
      showConfigDialog: false,

      tableData: [],
      pageTotal: 0,
      pageIndex: 1,
      pageSize: 20,
      loading: false,
      columns: [
        {
          label: '产品类型',
          prop: 'serviceCode',
          align: "center",
          formatter: (row, cellValue) => {
            switch (row.serviceCode) {
              case 'personalService':
                return '私人医生包'
                break
              case 'familyService':
                return '家庭医生包'
                break
              case 'healthCheckService':
                return '健康风险查'
                break
              case 'fourHighService':
                return '远程四高监测'
                break
              case 'fetalHeartRateService':
                return '远程胎心监测'
                break
            }
          },
        }, {
          label: '配置位置',
          prop: 'position',
          align: "center",
          isSlot: true,

        }, {
          label: '服务医院',
          prop: 'hospitalList',
          align: "center",
          width: 300,
          isSlot: true
        }, {
          label: '创建时间',
          prop: 'createTime',
          align: 'center',
          formatter: (row, cellValue) => {
            return this.formatterDate(row.createTime)
          },
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          width: 200,
          isSlot: true
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.post(this.api.company.getCustomList, {
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
        hospitalId: this.dataObj.hospitalId
      }).then((res) => {
        if (res.data.code === '200' ) {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum
        }
      })
    },
    handleOption(op, row) {
      switch (op) {
        case 'add':
          this.optionalConfiglData = {}
          this.optionalConfiglData.hospitalid = this.dataObj.hospitalId
          this.optionalConfiglData.organization = 'hospital'//机构
          this.showConfigDialog = true
          break
        case 'edit':
          this.optionalConfiglData = Object.assign({}, row);
          this.optionalConfiglData.hospitalid = this.dataObj.hospitalId
          this.optionalConfiglData.organization = 'hospital'//机构
          this.showConfigDialog = true;
          break;
        case 'del':
          this.$confirm('是否要确认?', '提示', {
            type: 'warning'
          }).then(() => {
            this.post(this.api.company.delCustom, {
              id:row.id
            }).then((res) => {
              if (res.data.code === '200') {
                this.$message.success('删除成功')
                this.getList()
              }
            })
          })
          break;
      }
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
    // 时间转换
    formatterDate(time) {
      if (time)
        return this.commonFunction.timestampFormat(new Date(time), 'yyyy-MM-dd hh:mm')
      else
        return ''
    },
  },
  components: {
    'element-table': ElementTable,
    'optional-dialog': optionalConfigUpdateDialog
  }
}
</script>

<style scoped>

</style>
